<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会议管理</title>
		
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="css/font.css">
		<link rel="stylesheet" href="css/xadmin.css">
		<link rel="stylesheet" href="../css/meeting.css">
		
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css">
	</head>
	<body>
		<h1 class="title-text">查看会议</h1>
		<div class="main-style">
			
			<!-- <div>
				<a href=""  class="sub-add btn btn-info" data-toggle="modal" data-target="#add-modal">添加</a>
			</div> -->
			<table class="table table-striped table-bordered tb-color " style="font-size: 15px;">
				<thead class="table-dark tbh-center">
					<tr>
						<th>选择</th>
						<th>会议室编号</th>
						<th>会议名称</th>
						<th>会议内容</th>
						<th>开始时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody-meeting" class="tbb-center">
					<!-- 数据从后端来 -->
		
				</tbody>
				
			</table>
		  <nav aria-label="Page navigation example" class="page-main">
			<ul  id="ul-pages"  class="pagination mypages">
		
			</ul>
		  </nav>
		</div>
		
		<!-- 修改模态框 -->
		<div class="modal fade" id="modify-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h6 class="modal-title" id="exampleModalLabel">修改会议信息</h6>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
				<form id="form-modify">
					
					<div class="form-group row">
					  <label for="input-mid" class="col-sm-3 col-form-label">会议室编号：</label>
					  <div class="col-sm-9">
					    <input name="roomId" type="text" class="form-control" id="input-name">
					  </div>
					</div>
					
					<div class="form-group row">
					  <label for="input-mname" class="col-sm-3 col-form-label">会议名称：</label>
					  <div class="col-sm-9">
					    <input name="mName" type="text" class="form-control" id="input-name">
					  </div>
					</div>
					
				  <div class="form-group row">
				    <label for="input-minfo" class="col-sm-3 col-form-label">会议内容：</label>
				    <div class="col-sm-9">
				      <input name="mInfo" type="text" class="form-control" id="input-info">
				    </div>
				  </div>	  
				 
				  
				  <div class="form-group row">
					 <label for="input-startTime" class="col-sm-3 col-form-label">会议开始时间：</label>
					 <div class="col-sm-9">
					   <input name="startTime" type="datetime-local" class="form-control" id="input-startTime">
					 </div>
				  </div>
				  			  			  			  	
				  
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="modifyData()">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 删除模态框 -->
		<div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h6 class="modal-title" id="exampleModalLabel">温馨提示：</h6>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		          <span aria-hidden="true">&times;</span>
		        </button>
		      </div>
		      <div class="modal-body">
		      <h6>是否删除会议号为:<span id="span-cid"></span>的数据</h6>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteData($('#span-cid').text())">确定</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		
		
		
		
		<script>
			
			let baseUrl = "http://localhost:8080/company"
		
			// -----------------分页数据展示-------------------
			let pageSize = 5;
			getPageInfo(1)
			
			// 获得分页数据, pageNum=第几页，参数2=每页显示数据量
			function getPageInfo(pageNum) {
				$.ajax({
					url: baseUrl + "/meeting/show",
					type: "post", //默认get
					dataType: "json",
					data: `pageNum=${pageNum}&pageSize=${pageSize}`,
					success: function(data){
						// console.log(data)
						if(data.code == 200) {
							// 动态渲染画面
							showMeetings(data.pageInfo)
							// 动态渲染分页按钮
							showPages(pageNum, data.pageInfo.pages)
						}
					}
				})
			}
			
			// 动态渲染页面
			function showMeetings(pageInfo) {
				console.log(pageInfo)
				
				// 清空父容器
				$('#tbody-meeting').empty()
				
				// 对数据循环
				$(pageInfo.list).each(function(index, meeting) {
					// 根据数据，动态创建一行表格
					let trMeeting = $(`
							<tr>
								<td>
									<input type="checkbox" class="input-delete">
								</td>
								<td style="display: none;">${meeting.roomId}</td>
								<td>${meeting.roomId}</td>
								<td>${meeting.mname}</td>
								<td>${meeting.minfo}</td>
								<td>${meeting.startTime}</td>
								<td>
									<button type="button" class="btn btn-primary" data-toggle="modal"
										data-target="#modify-modal" data-cid="${meeting.roomId}">
									  修改
									</button>
									<button type="button" class="btn btn-danger" data-toggle="modal" 
										data-target="#delete-modal" data-cid="${meeting.roomId}">
										删除
									</button>
								</td>
							</tr>					
					`)
					// 将表格放入父容器
					$('#tbody-meeting').append(trMeeting)
				})				
			}	
			
			// ---------------- 动态分页 ------------------------
			function showPages(pageNum, pages) {
				// 清空父容器
				$('#ul-pages').empty()
				
				let sy = $(`
					<li class="page-item ${1 == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Previous" 
							onclick = "getPageInfo(1)">
						<span aria-hidden="true">&laquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(sy)
				
				for (var i = 0; i < pages; i++) { 
					let pageStr = `
						<li class="page-item  ${i+1 == pageNum ? 'active' : ''} ">
							<a  
								class="page-link"
								href="javascript:;"
							    onclick = "getPageInfo(${i+1})">${i+1}
							</a>
						</li>
					`
					let page = $(pageStr)
					$('#ul-pages').append(page)
				}
				
				// getPageInfo
				let wy = $(`
					<li class="page-item ${pages == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Next"
							onclick = "getPageInfo(${pages})">
					    <span aria-hidden="true">&raquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(wy)
				
			}
			
			
			// -------------- 修改会议信息逻辑  --------------
			function modifyData() {
				let modifym = $('#form-modify').serialize()
				console.log(modifym)
				$.ajax({
					url: baseUrl + "/meeting/modify",
					type: "post",
					dataType: "json",
					data: modifym,
					success: function(data) {
						if(data.code == 200) {
							console.log(data)
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
			
			
			// ----------- 删除数据---------------
			$('#delete-modal').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget) 
				var cid = button.data('cid')
				// console.log(cid)
				var modal = $(this)
				modal.find('#span-cid').text(cid)
				// console.log(cid)
			})
			
			function deleteData(cid) {
				 //console.log('删除数据了...' + cid)
				$.ajax({
					url: baseUrl + "/meeting/delete",
					type: "delete",
					dataType: "json",
					data: "mid="+cid,
					success: function(data){
						if(data.code == 200) {
							// 刷新画面
							getPageInfo(1)
						}
					}
				})
			}
		
	
			
		</script>	
		
	</body>
</html>